<template>
	<view v-if="show" class="flex flex-row" :class="[loading ? 'opacity-5' : '']">
		<tm-translate @end="aniEnd" ref="anitag" name="zoom" reverse :autoPlay="false">
			<tm-sheet @click="onclick" :transprent="props.transprent" :color="props.color"
				_class="flex-row flex flex-row-center-center" :_style="customCSSStyle" :followTheme="props.followTheme"
				:followDark="props.followDark" :dark="props.dark" :round="props.round"
				:shadow="(props.checkable && checked_com) || !props.checkable ? props.shadow : 0"
				:outlined="props.checkable && !checked_com ? true : props.outlined" :border="props.border"
				:borderStyle="props.borderStyle" :borderDirection="props.borderDirection"
				:text="props.checkable && !checked_com ? true : props.text" :linear="props.linear"
				:linearDeep="props.linearDeep" :margin="props.margin" :padding="[wh.px, wh.py]"
				:border-color="props.borderColor" :linear-color="props.linearColor">
				<tm-icon :color="_fontColor" v-if="props.icon && props.iconAlign == 'left'" :name="props.icon"
					:followDark="props.followDark" :fontSize="wh.fontSize" :dark="props.dark"
					:userInteractionEnabled="false"></tm-icon>

				<view class="flex-1 flex flex-center px-12">
					<slot name="default">
						<tm-text :color="_fontColor" :fontSize="wh.fontSize" :followDark="props.followDark"
							:userInteractionEnabled="false" :dark="props.dark" :label="props.label"></tm-text>
					</slot>
				</view>
				<view @click.stop="">
					<tm-icon :color="_fontColor" @click="closeTag" :followDark="props.followDark"
						v-if="props.closable && !loading" :_class="props.icon ? 'pl-10' : ''"
						:fontSize="wh.fontSize * 0.8" name="tmicon-times" :dark="props.dark"></tm-icon>
				</view>
				<tm-icon :color="_fontColor" v-if="props.icon && props.iconAlign == 'right'" :name="props.icon"
					:followDark="props.followDark" :fontSize="wh.fontSize" :dark="props.dark"
					:userInteractionEnabled="false"></tm-icon>
				<view :userInteractionEnabled="false" v-if="loading" class="pl-10 flex flex-center flex-row"
					style="line-height: 0">
					<tm-icon :color="_fontColor" :followDark="props.followDark" :fontSize="wh.fontSize * 0.8"
						name="tmicon-loading" spin :dark="dark">
					</tm-icon>
				</view>
			</tm-sheet>
		</tm-translate>
	</view>
</template>

<script lang="ts" setup>
	/**
	 * 标签
	 */
	import tmSheet from '../tm-sheet/tm-sheet.vue'
	import tmApp from '../tm-app/tm-app.vue'
	import tmText from '../tm-text/tm-text.vue'
	import tmDivider from '../tm-divider/tm-divider.vue'
	import tmIcon from '../tm-icon/tm-icon.vue'
	import tmTranslate from '../tm-translate/tm-translate.vue'
	import { getCurrentInstance, computed, ref, provide, inject, onMounted, onUnmounted, nextTick, watch, PropType } from 'vue'
	import { cssstyle, tmVuetify } from '../../tool/lib/interface'
	import { custom_props, computedClass, computedStyle } from '../../tool/lib/minxs'
	// #ifdef APP-PLUS-NVUE
	const Binding = uni.requireNativePlugin('bindingx')
	const dom = uni.requireNativePlugin('dom')
	// #endif
	// 混淆props共有参数
	const props = defineProps({
		...custom_props,
		followTheme: {
			type: [Boolean],
			default: true
		},
		transprent: {
			type: [Boolean],
			default: false
		},
		border: {
			type: [Number],
			default: 0
		},
		round: {
			type: [Number],
			default: 2
		},
		shadow: {
			type: [Number],
			default: 1
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [10, 10]
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0]
		},

		//是否开启标签可选中状态。
		checkable: {
			type: [Boolean],
			default: false
		},
		//只有当checkable为true时有效。
		checked: {
			type: [Boolean],
			default: false
		},
		//标签是否处于加载中。
		load: {
			type: [Boolean],
			default: false
		},
		//标签尺寸
		size: {
			type: String as PropType<'xs' | 's' | 'm' | 'n' | 'g' | 'lg'>,
			default: 'm' //xs|s|m|n|g|lg
		},
		fontSize: {
			type: [Number],
			default: 0
		},
		//是否允许关闭标签。
		closable: {
			type: [Boolean],
			default: false
		},
		//标签上显示图标。
		icon: {
			type: [String],
			default: ''
		},
		/**图标在文字的左还是右 */
		iconAlign: {
			type: String as PropType<'left' | 'right'>,
			default: 'left'
		},
		label: {
			type: [String],
			default: ''
		},
		fontColor: {
			type: String,
			default: ''
		},
		beforeClose: {
			type: Function,
			default: null
		}
	})
	const emits = defineEmits(['click', 'close', 'change', 'update:checked'])

	const anitag = ref<InstanceType<typeof tmTranslate> | null>(null)
	//自定义样式：
	const customCSSStyle = computed(() => computedStyle(props))
	//自定类
	const customClass = computed(() => computedClass(props))
	//显示
	const show = ref(true)
	//是否选中。
	const _checked_ = ref(false)
	const _fontColor = computed(() => props.fontColor)
	//是否加载中.
	const loading = computed(() => props.load)
	const checked_com = computed({
		get: function () {
			return _checked_.value
		},
		set: function (val: boolean) {
			_checked_.value = val
			emits('update:checked', _checked_.value)
		}
	})
	checked_com.value = props.checked
	watch(
		() => props.checked,
		(newval) => {
			checked_com.value = newval
			emits('change', checked_com.value)
		}
	)
	const wh = computed(() => {
		if (props.size == 'xs') {
			return {
				px: props.padding[0] || 10,
				py: props.padding[1] || 4,
				fontSize: props.fontSize || 22
			}
		} else if (props.size == 's') {
			return {
				px: props.padding[0] || 14,
				py: props.padding[1] || 4,
				fontSize: props.fontSize || 24
			}
		} else if (props.size == 'm') {
			return {
				px: props.padding[0] || 16,
				py: props.padding[1] || 8,
				fontSize: props.fontSize || 26
			}
		} else if (props.size == 'n') {
			return {
				px: props.padding[0] || 18,
				py: props.padding[1] || 10,
				fontSize: props.fontSize || 28
			}
		} else if (props.size == 'g') {
			return {
				px: props.padding[0] || 20,
				py: props.padding[1] || 12,
				fontSize: props.fontSize || 32
			}
		} else if (props.size == 'lg') {
			return {
				px: props.padding[0] || 24,
				py: props.padding[1] || 16,
				fontSize: props.fontSize || 36
			}
		}
		return {
			px: props.padding[0],
			py: props.padding[1],
			fontSize: props.fontSize
		}
	})

	function onclick(e: TouchEvent | MouseEvent) {
		emits('click', e)
		if (loading.value) return
		checked_com.value = !checked_com.value
	}
	function aniEnd() {
		show.value = false
		emits('close')
	}
	async function closeTag(e: TouchEvent | MouseEvent) {
		if (loading.value) return
		e.stopPropagation()
		let p: Function | boolean = true
		if (typeof props.beforeClose == 'function') {
			p = await props.beforeClose()
			if (typeof p == 'function') {
				p = await p()
			}
			if (!p) return
		}
		if (anitag.value) {
			anitag.value.play()
		} else {
			show.value = false
			emits('close')
		}
	}
</script>
